import LRContainer from '@/components/CardLayout/LRContainer';
import { deleteSysFile, pageSysFile } from '@/pages/system/system-file/service';
import { SysFile } from '@/pages/system/system-file/type';
import { fullDownloadFileUrl } from '@/services/system/file';
import { DeleteOutlined, DownloadOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Alert, Button, message, Modal } from 'antd';
import React, { useRef, useState } from 'react';
import FileDetail from './components/FileDetail';
import FileUploadModal from './components/FileUploadModal';

const SystemFile: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [currentFile, setCurrentFile] = useState<SysFile>();

  const columns: ProColumns<SysFile>[] = [
    {
      title: '文件名',
      dataIndex: 'filesName',
      width: 200,
      fixed: 'left',
      ellipsis: true,
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: 60,
    },
    {
      title: '大小(KB)',
      dataIndex: 'size',
      width: 80,
      hideInSearch: true,
      render: (text) => (text ? Number(text).toFixed(2) : '-'),
    },
    {
      title: 'MD5',
      dataIndex: 'md5',
      width: 200,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'enable',
      width: 100,
      valueEnum: {
        1: { text: '可用', status: 'Success' },
        0: { text: '不可用', status: 'Error' },
      },
    },
  ];

  return (
    <LRContainer
      leftTitle="系统文件列表"
      rightTitle="文件详情"
      leftSpan={65}
      rightSpan={35}
      leftExtra={[
        <FileUploadModal
          key="upload"
          trigger={
            <Button type="primary" icon={<PlusOutlined />}>
              上传文件
            </Button>
          }
          onSuccess={() => {
            actionRef.current?.reload();
          }}
        />,
      ]}
      rightExtra={
        currentFile && (
          <Button.Group>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              href={fullDownloadFileUrl(currentFile.id)}
              target="_blank"
              rel="noopener noreferrer"
            >
              下载
            </Button>
            <Button
              danger
              icon={<DeleteOutlined />}
              onClick={async () => {
                Modal.confirm({
                  title: '确认删除',
                  content: `确定要删除文件 ${currentFile.filesName} 吗？`,
                  onOk: async () => {
                    const { data }: any = await deleteSysFile(currentFile.id);
                    if (data) {
                      message.success('删除成功');
                      actionRef.current?.reload();
                      setCurrentFile(undefined);
                    }
                    return !!data;
                  },
                });
              }}
            >
              删除
            </Button>
          </Button.Group>
        )
      }
      leftContent={
        <ProTable<SysFile>
          columns={columns}
          actionRef={actionRef}
          request={async (params) => {
            const { data } = await pageSysFile(params);
            return data;
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
            span: 6,
            filterType: 'light',
          }}
          pagination={{
            pageSize: 15,
          }}
          tableAlertRender={false}
          dateFormatter="string"
          rowSelection={{
            type: 'radio',
            selectedRowKeys: currentFile ? [currentFile.id] : [],
            onChange: (_, rows) => setCurrentFile(rows[0]),
          }}
          onRow={(record) => ({
            onClick: () => setCurrentFile(record),
            style: { cursor: 'pointer' },
          })}
        />
      }
      rightContent={
        currentFile ? (
          <FileDetail data={currentFile} />
        ) : (
          <Alert message="请选择一个文件" type="info" showIcon />
        )
      }
    />
  );
};

export default SystemFile;
